<template>
	<view class="UploadList">
		<view class="file_list">
			<view class="file_item" v-for="(file, index) in fileList" :key="index">
				<!-- 图片 -->
				<view class="upload_wrap" @click="preview(file)">
					<u-upload
						:fileList="[file]"
						@delete="deletePic(index)"
						width="344rpx"
						height="660rpx"
						multiple
						:maxCount="1"
						:previewFullImage="false"
					></u-upload>
				</view>

				<!-- 标签栏 -->
				<view class="label_list">
					<view class="plus" @click="open(file, index)">
						<view class="plus-box">
							<view class="plus-icon">
								<u-icon
									name="plus-circle-fill"
									color="#55acee"
									size="60rpx"
								></u-icon>
							</view>
							<view class="plus-bg"></view>
						</view>
					</view>
					<view class="tag_list">
						<view class="tag_item" v-for="(item, i) in file.tagList" :key="item.id">
							<!-- <u-tag
								:text="item.name"
								bgColor="#55acee"
								borderColor="#55acee"
								@click="closeTag(i, index)"
							></u-tag> -->
							<Tag :text="item.name" @click="closeTag(i, index)"></Tag>
						</view>
					</view>
				</view>
			</view>

			<!-- 上传按钮 -->
			<view>
				<u-upload @afterRead="afterRead" multiple :maxCount="10">
					<view class="add"><u-icon name="plus" color="#949494" size="80rpx" bold></u-icon></view>
				</u-upload>
			</view>
		</view>

		<!-- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> -->

		<!-- 弹出层 -->
		<TagsPopup
			v-if="show"
			:show="show"
			:chooses="selectedTags"
			:options="assetTags"
			hasSearch
			@finish="finish"
			@close="close"
		/>
	</view>
</template>

<script>
import api from '@/common/api.js';
import TagsPopup from '@/components/TagsPopup.vue';
import { initial } from '../../common/chineseConversion.js';
import Tag from '@/components/Tag/Tag.vue';
export default {
	components: {
		TagsPopup,
		Tag
	},
	props: {
		assetTags: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			fileList: [],
			show: false, // 控制弹出层显示隐藏
			tagList: ['111111111', '22222', '333333333333'],
			customStyle: {
				width: '80rpx !important', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				height: '60rpx !important'
			},
			popupTags: [],
			scrollTop: 0,

			list: [],
			currentFileIndex: '',
			keyword: '',
			file: {},

			selectedTags: [] // 已选标签
		};
	},

	methods: {
		searchReault() {
			console.log('123');
		},

		preview(item) {
			uni.previewImage({
				urls: this.fileList.filter(item => uni.$u.test.image(item.url)).map(item => item.url),
				current: item.url,
				fail() {
					uni.$u.toast('预览图片失败');
				}
			});
		},

		// 删除图片
		deletePic(index) {
			this.fileList.splice(index, 1);
			this.$emit('upload', this.fileList);
		},

		// 新增图片
		async afterRead(event) {
			console.log('event ==>', event);
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this.fileList.length;
			lists.map(item => {
				this.fileList.push({
					...item,
					status: 'uploading',
					message: '上传中',
					tagList: []
				});
			});
			for (let i = 0; i < lists.length; i++) {
				// let result = await this.uploadFilePromise(lists[i].thumb);
				// console.log('result ==>', result);
				let item = this.fileList[fileListLen];
				// if (!result) {
				// 	this.fileList.splice(fileListLen, 1);
				// 	return false;
				// }
				this.fileList.splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: ''
						// ...result
					})
				);
				fileListLen++;
			}
			// console.log('上传成功 ==>', this.fileList);
			this.$emit('upload', this.fileList);
		},

		// 上传图片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$baseURL + api.upload_url,
					filePath: url,
					name: 'file',
					success: res => {
						let result = JSON.parse(res.data);
						console.log('resImg ==>', result);
						if (result.code == '400') {
							uni.showToast({
								title: result.message,
								icon: 'none'
							});
							resolve(false);
							return;
						}
						let data = result.data;
						delete data.size;
						resolve(data);
					},
					fail: e => {
						console.log(e);
					}
				});
			});
		},

		// 关闭标签
		closeTag(tagIndex, fileIndex) {
			console.log('tagIndex ==>', tagIndex);
			console.log('fileIndex ==>', fileIndex);
			this.fileList[fileIndex].tagList.splice(tagIndex, 1);
			this.$emit('upload', this.fileList);
		},

		/* 弹出层的方法 */
		open(file, index) {
			// this.list = [];
			// this.popupTags = [];
			// this.$refs.popup.open('bottom');
			this.currentFileIndex = index;
			console.log('file ==>', file);
			this.selectedTags = file.tagList;

			// 	this.pySort(this.assetTags, this.selectedTags);

			// 	this.list.forEach((value, index) => {
			// 		if (value.data.length === 0) {
			// 			return
			// 		}
			// 		value.data.forEach(item => {
			// 			if (item.checked) {
			// 				this.popupTags.push(item.name);
			// 				console.log("item.name ==>", item.name);
			// 			}
			// 		})
			// 	})
			// console.log("popupTags ==>", this.popupTags);
			this.show = true;
		},

		// 选择标签
		selectTag(obj) {
			console.log('selectTag ==>', obj);
			let item = obj.item;
			let index = this.popupTags.indexOf(item.name);
			if (index === -1) {
				this.popupTags.push(item.name);
			} else {
				if (item.checked) {
					this.popupTags.splice(index, 1);
				}
			}
		},

		// 点击标签
		clickTag(index) {
			// this.popupTags.splice(index, 1);
		},

		close() {
			this.show = false;
		},

		finish(tags) {
			this.show = false;
			console.log('index ==>', this.currentFileIndex);
			this.fileList[this.currentFileIndex].tagList = tags;
			console.log('finish ==>', this.fileList);
			this.$emit('upload', this.fileList);
		}
	}
};
</script>

<style lang="scss">
.UploadList {
	.add {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 686rpx;
		height: 146rpx;
		background-color: #f1f1f1;
		border: 2rpx dashed #c5c5c5;
		border-radius: 20rpx;
		/* margin: 40rpx 0; */
	}

	.file_item {
		position: relative;
		margin-bottom: 20rpx;
	}

	.label_list {
		position: absolute;
		right: 0;
		top: 0;
		width: 320rpx;
	}

	.tag_list {
		// display: flex;
		// // flex-direction: column;
		// flex-wrap: wrap;
		height: 580rpx;
		overflow: auto;
		margin-top: 20rpx;
	}

	.tag_item {
		display: inline-block;
		margin: 0 20rpx 20rpx 0;
		// margin-top: 20rpx;
		// border-radius: 12rpx;
		// overflow: hidden;
	}

	.plus {
		width: 108rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #55acee;
		border-radius: 32rpx;
	}

	.plus-box {
		position: relative;
	}
	.plus-icon {
		position: relative;
		z-index: 1;
	}
	.plus-bg {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 40rpx;
		height: 40rpx;
		background-color: #fff;
		border-radius: 50%;
		z-index: 0;
	}
}
</style>
